<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:ext="http://opensource.extjsf.com/jsf" xml:lang="en" lang="en">
	<ui:composition template="/template/global.xhtml">
		<ui:define name="body">
			<h1 align="center"><a href="../code/person.xhtml.txt">view source</a></h1>
			<h2>
				Form Submit<br/>
				Change the data in the form ,then click "OK" to see the log in console.
			</h2>
			
			<div id='form1_div' />
			<ext:form id="form1" labelWidth="75" title="Form Sample"
				renderTo="form1_div" width="350" frame="true"
				bodyStyle="padding:5px 5px 0" defaultType="textfield"
				defaults__NS="{width: 230}" maskDisabled="false">
				<ext:field fieldLabel="Name" name="name" allowBlank="false"
					value="#{person.name}" />
				<ext:field fieldLabel="Age" name="age" value="#{person.age}"
					xtype="numberfield" />
				<ext:field fieldLabel="Birthday" name="birthday" xtype="datefield"
					format="y-m-d" />
				<ext:field fieldLabel="Gender" name="gender"
					value="#{person.gender}" />
				<ext:button text="Save"
					handler__NS="document.getElementById('form1_h:save').onclick" />
				<ext:button text="Cancel" />

			</ext:form>

			<h:panelGroup style="display:none">
			<h:form id="form1_h">
				<input jsfc="h:inputHidden" value="#{person.name}" type="hidden" id="name"/>
				<input jsfc="h:inputHidden" value="#{person.age}" type="hidden" id="age"/>
				<h:inputHidden value="#{person.birthday}" id="birthday" converter="javax.faces.DateTime"/>
				<input jsfc="h:inputHidden" value="#{person.gender}" type="hidden" id="gender"/>				
				<a4j:commandButton id="save" action="#{person.savePerson}" onclick="collectData('form1');" oncomplete="Ext.get('form1').unmask();" ></a4j:commandButton>
			</h:form>
			</h:panelGroup>
			<h:messages></h:messages>
		</ui:define>
	</ui:composition>

</html>
